<template>
  <a-modal title="项目信息" :visible="show" @ok="handleOk" @cancel="handleCancel" width="70vw" :maskClosable="false">
    <div>
      <a-button @click="openPurchaseOrderList" icon="search" class="hte-btn">获取采购订单</a-button>
      <a-button @click="deletePurchaseOrderList" icon="delete" class="hte-btn">删除明细行</a-button>
      <a-button @click="calcPurchaseOrderList" icon="diff" class="hte-btn">计算</a-button>
      <a-button @click="savePurchaseOrderList" icon="check" class="hte-btn">保存</a-button>
    </div>
    <div>
      <a-form-model ref="checkListForm">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="计算金额">
              <a-input v-model="check.amount" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="其他扣减项金额">
              <a-input v-model="check.otherFineAmount" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="核算单号">
              <a-input v-model="check.checkListNo" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="质保金计算方式">
              <a-select v-model="check.checkType">
                <a-select-option v-for="(code, index) in WorkReportCheckListType" :value="code.code" :key="index">
                  {{ code.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="质保金比例">
              <a-input v-model="check.checkPercenage" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="本次支付金额">
              <a-input v-model="check.payAmount" :disabled="!(check.checkType == '3')" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <a-table
      :columns="detailColumns"
      :data-source="records"
      rowKey="rowKey"
      bordered
      :pagination="false"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <!-- <span slot="purchaseOrderNumberRender">
        {{ project.busKey }}
      </span>
      <span slot="contractNumberRender">
        {{ project.contractNumber }}
      </span> -->
      <template slot="footer"> Footer </template>
    </a-table>
    <PurchaseOrderList :show="showPurchaseOrderList" :supplierCode="supplierCode" :wbs="wbs" @selected="selected" />
  </a-modal>
</template>
<script>
import { postAction } from '@/api/manage'
import PurchaseOrderList from '@/views/workReport/purchase/PurchaseOrderList'
export default {
  components: {
    PurchaseOrderList,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    supplierCode: {
      type: String,
      default: null,
    },
    wbs: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      detailColumns: [
        {
          title: '采购订单号',
          dataIndex: 'EBELN',
          width: '100px',
          align: 'center',
        },
        {
          title: '合同号',
          dataIndex: 'DOKNR',
          width: '100px',
          align: 'center',
        },
        {
          title: '项目行号',
          dataIndex: 'EBELP',
          width: '80px',
          align: 'center',
        },
        {
          title: '款项名称',
          dataIndex: 'TXZ01',
          width: '300px',
          align: 'center',
        },
        {
          title: '行项金额',
          dataIndex: 'NETPR',
          width: '80px',
          align: 'center',
        },
        {
          title: '已付金额',
          dataIndex: 'DMBTR',
          width: '80px',
          align: 'center',
        },
        {
          title: '已发起单未支付金额',
          dataIndex: 'unpaidAmount',
          width: '100px',
          align: 'center',
        },
        {
          title: '质保金额',
          dataIndex: 'qualityDeposit',
          width: '80px',
          align: 'center',
        },
        {
          title: '最终预留质保金',
          dataIndex: 'finalQualityDeposit',
          width: '80px',
          align: 'center',
        },
      ],
      WorkReportCheckListType: [
        { code: '1', name: 'A:最终预留质保金=结算金额*质保金比例' },
        { code: '2', name: 'B:最终预留质保金=质保金额' },
        { code: '3', name: 'C:最终预留质保金=人工编辑' },
      ],
      urls: {
        loadPurchaseOrderDetail: '/hte/contract/loadPurchaseOrderDetail',
      },
      showPurchaseOrderList: false,
      selectedRowKeys: [],
      selectedRow: [],
      records: [],
      check: {},
    }
  },
  mounted() {},
  methods: {
    openPurchaseOrderList() {
      this.showPurchaseOrderList = true
    },
    deletePurchaseOrderList() {
      let list = []
      this.records.forEach((row) => {
        if (this.selectedRowKeys.indexOf(row.rowKey) <= -1) {
          list.push(row)
        }
      })
      this.records = list
      this.selectedRowKeys = []
      this.selectedRow = []
    },
    calcPurchaseOrderList() {
      this.showPurchaseOrderList = true
    },
    savePurchaseOrderList() {
      this.showPurchaseOrderList = true
    },
    selected(rows) {
      this.showPurchaseOrderList = false
      this.fetchDetail(rows)
    },
    onSelectChange(selectedRowKeys, selectedRow) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRow = selectedRow
    },
    fetchDetail(datas) {
      if (datas.length > 0) {
        postAction(this.urls.loadPurchaseOrderDetail, datas).then((res) => {
          if (res.success) {
            let list = res.result
            list.forEach((element) => {
              element.rowKey = this.randomString(10)
            })
            this.records = list
          }
        })
      }
    },
    handleOk() {
      this.$emit('close')
    },
    handleCancel() {
      this.$emit('close')
    },
    randomString(len) {
      len = len || 32
      var $chars =
        'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .container {
    .content {
      margin-top: 20px;
      section {
        .section-table {
          .add-btn {
            margin-left: 0;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
  .tips-box {
    margin-top: 32px;
    .add-btn {
      width: 180px;
      height: 40px;
      line-height: 40px;
      background-color: #4095e4;
      border-radius: 2px;
    }
  }
}
.icon-file {
  background-image: url('~@assets/file.png');
}
.cr-content-pop {
  p {
    margin-bottom: 15px;
    color: #666;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>